<template>
	<view class="chat-button-container">
		<view 
			class="chat-bubble" 
			:class="{ 'pulse': showPulse }"
			@click="goToChat"
			@touchstart="handleTouchStart"
			@touchend="handleTouchEnd"
		>
			<!-- 背景光晕效果 -->
			<view class="bubble-glow"></view>
			
			<!-- 图标 -->
			<view class="bubble-icon">💬</view>
			
			<!-- 未读消息提示 -->
			<view v-if="unreadCount > 0" class="badge">
				{{ unreadCount > 99 ? '99+' : unreadCount }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// Props
const props = defineProps({
	// 未读消息数量
	unreadCount: {
		type: Number,
		default: 0
	},
	// 按钮位置：'right-bottom'(右下), 'left-bottom'(左下)
	position: {
		type: String,
		default: 'right-bottom',
		validator: (value) => ['right-bottom', 'left-bottom'].includes(value)
	},
	// 距离底部的距离（rpx）
	bottom: {
		type: Number,
		default: 120
	},
	// 是否显示脉冲动画
	showPulse: {
		type: Boolean,
		default: true
	}
})

// 按钮状态
const isPressed = ref(false)

// 点击跳转到聊天页面
const goToChat = () => {
	uni.navigateTo({
		url: '/pages/chat/chat',
		success: () => {
			console.log('跳转到聊天页面成功')
		},
		fail: (err) => {
			console.error('跳转失败:', err)
			uni.showToast({
				title: '跳转失败',
				icon: 'none'
			})
		}
	})
}

// 触摸开始
const handleTouchStart = () => {
	isPressed.value = true
}

// 触摸结束
const handleTouchEnd = () => {
	setTimeout(() => {
		isPressed.value = false
	}, 100)
}

onMounted(() => {
	console.log('聊天按钮组件已加载')
})
</script>

<style lang="scss" scoped>
.chat-button-container {
	position: fixed;
	right: 30rpx;
	bottom: 120rpx;
	z-index: 9999;
	pointer-events: none;
}

.chat-bubble {
	position: relative;
	width: 110rpx;
	height: 110rpx;
	background: linear-gradient(135deg, #8cbefe 0%, #edfeff 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
	cursor: pointer;
	pointer-events: auto;
	transition: all 0.3s ease;
	overflow: visible;
	
	&:active {
		transform: scale(0.9);
	}
	
	&:hover {
		transform: scale(1.05);
		box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.6);
	}
}

// 脉冲动画
.pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
	0%, 100% {
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
	}
	50% {
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4),
		            0 0 0 20rpx rgba(102, 126, 234, 0),
		            0 0 0 40rpx rgba(102, 126, 234, 0);
	}
}

// 光晕效果
.bubble-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
	animation: rotate 3s linear infinite;
}

@keyframes rotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

// 图标
.bubble-icon {
	font-size: 56rpx;
	position: relative;
	z-index: 2;
	animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6rpx);
	}
}

// 未读消息徽章
.badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	min-width: 36rpx;
	height: 36rpx;
	background: #ff4d4f;
	color: white;
	font-size: 20rpx;
	font-weight: bold;
	border-radius: 18rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8rpx;
	box-shadow: 0 4rpx 8rpx rgba(255, 77, 79, 0.4);
	z-index: 3;
	animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

// 左下角位置
.chat-button-container.left-bottom {
	left: 30rpx;
	right: auto;
}
</style>

